<template>
    <div>
        <div class="top">
            <div class="center">
                <div class="left">
                    <!-- <img :src='images.logo'/> -->
                </div>
               <!--  <div class="right">管理平台</div> -->
                <div class="clearBoth"></div>
            </div>
        </div>
        <div class="main">
            <div class="center">
                <div class="box">
                    <div class="title">登录</div>
                    <div class="li">
                        <input class="text1" v-model='formInline.user' type="text" placeholder="请输入登录账号"/>
                    </div>
                    <div class="li">
                        
                        <input class="text1" type="password" v-model="formInline.password" placeholder="请输入登录密码"/>
                    </div>
                    <button  @click="handleSubmit" class="submitBut">登录</button>
                    <div class="error"></div>
                    
                </div>
                
            </div>
        </div>
        <div class="bottom">
            <span>亿利金威征信管理平台</span>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                spinShow:false,
                paths:"",
                formInline: {
                    user: '',
                    password: '',
                    security: '',
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ]
                },
                countTime:60,
                countValue:'免费获取验证码'
            }
        },
        computed:{
            images(){
                return {
                    logo:this.paths+'/src/images/logo1.png',
                    shape1:this.paths+'/src/images/Shape1.png',
                    shape2:this.paths+'/src/images/Shape2.png',
                    shape3:this.paths+'/src/images/Shape3.png',
                }
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.paths=this.publicPath;
            })
        },
        methods: {
           
            handleSubmit() {
                 this.spinShow=true;
                const that=this;
                        this.$http.jsonp(this.getNetDataAddress+'/login/checkLogin',{
                                params:{userName:this.formInline.user,password:this.formInline.password},
                                jsonp:'callback'
                            }).then((datas)=>{
                             
                                if(datas.body.code=='001'){
                                            
                                            this.myRouter.push({path:"/app/index"});
                                       
                                }else{
                                    this.$alert('登陆失败!');
                                } 
                            },(error)=>{
                               
                                this.$alert('登陆失败!');
                            });    
                
            },
            reqCode(){
                if(this.countTime==60){
                    this.$http.jsonp(this.getNetDataAddress+'/login/login',{
                                params:{userName:this.formInline.user,password:this.formInline.password},
                                jsonp:'callback'
                            }).then((datas)=>{
    
                                if(datas.body.code=='001'){
                                    
                                    this.$http.jsonp(this.getNetDataAddress+'/login/sendCode',{
                                            params:{phone:datas.body.result.phone},
                                            jsonp:'callback'
                                        }).then((datas)=>{
                                            console.log(datas.body.code);
                                            if(datas.body.code=='001'){
                                                this.$alert('验证码发送成功!');
                                                this.time();
                                            }else{
                                                 this.$alert('验证码发送失败!');
                                            }
                                        },(error)=>{
                                            this.$alert('验证码请求失败!');
                                        });
                                }else{
                                    this.$alert('用名或密码错误!');
                                }
                            },(error)=>{
                                
                            });
                    }
                
            },
           
        }
    }
</script>
<style>
    .clearBoth{ clear: both;}
    .center{
        width:800px;
        margin:0px auto;
        height:100%;
        position: relative;
    }
    .top{
        height:70px; background: #fff;
    }
    .main{
        background: url("/src/images/bg.png") no-repeat 20% center #4ab7e0;
        background-size: auto 100%;
        height:600px;
    }
    .box{
        border-radius: 10px;
        position: absolute;
        right:0px; top:100px;
        width:360px;
        background: #fff;
        padding:10px 30px 10px 30px;
    }
    .box .li{
        width:100%; height:50px;
        box-sizing: border-box;
        border-radius: 50px;
        border:1px solid #d9d9d9;
        margin-bottom:20px;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;
        padding:5px 5px 5px 45px;

    }
    .box .li .img1{
        height:30px; width:30px; display: block;
        position: absolute;
        top:10px; left:10px;
    }
    .box .li .text1{
        width:100%; display: block;
        height:30px; line-height:30px;
        border-width:0px;
        -webkit-tap-highlight-color: transparent;outline:none;
        font-size: 14px;
        color:#666;
    }
    .box .li .butInput{
        width:60%;
    }
    .box .li .but{
        width:50%; display: block;
        height:40px; line-height:30px;
        border-width:0px;
        -webkit-tap-highlight-color: transparent;outline:none;
        font-size: 14px;
        border-radius: 40px;
        position: relative;
        z-index: 2;
        background: #F55955;
        color:#fff;
        cursor: pointer;
    }
    .box .li .but:hover{

    }
    .submitBut{
        background: #4EAE7B;
        color:#fff;
        display: block;
        text-align: center;
        border-width:0px;
        font-size: 14px;
        padding:0px;
        width:100%; height:50px;
        box-sizing: border-box;
        border-radius: 50px;
        margin-bottom:10px;
        overflow: hidden;
        align-items: center;
        position: relative;
        -webkit-tap-highlight-color: transparent;outline:none;
        cursor: pointer;
    }
    .error{
        color:#f22; line-height:30px; text-align: center;
        padding:5px 0px;
    }
    .left{
        width:50%; float: left;
    }
    .right{
        width:50%; float: left; text-align: right;
        color:#666; font-size: 16px;
        line-height:70px;
    }
    .left img{
        display: block; margin-top:10px;
    }
    .title{
        text-align: center;padding-bottom:10px;
        line-height:40px;font-size: 18px;
        color:#777;
    }
    .bottom{
        line-height:30px; font-size: 14px; color:#777;
        padding:20px 0px; text-align: center;
    }
</style>

